<template>
    <view>
        <view class="topbox">
            <view class="commis">{{userinfo.Commission || '0'}}</view>
            <view class="titlebox">
                <image class="coinimg" src=" https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720406614526516.png"></image>
                <view class="title_1">我的收益</view>
                <view class="payHuiDouNav"  @click="tixbtn">
                    <text lines="1" class="text_4">提现</text>
                </view>
            </view>
        </view>
        <view class="navList">
            <view class="navContent">
                <text
                lines="1"
                class="text_5"
                :class="{ navActive: navIndexValue == index }"
                @click="navIndex(index)"
                v-for="(item,index) in navMenu" :key="index"
                >{{item}}</text
                >
            </view>
        </view>
        <block v-if="navIndexValue == 0">
            <view class="listbox">
            <!-- <view class="titlebox">
                <view class="leftline"></view>
                <view class="title_2">收益明细</view>
            </view> -->
            <block v-if="list.length > 0">
                <view class="content" v-for="(item,index) in list" :key="index">
                    <view class="leftbox">
                        <view class="sill">
													{{item.Product}}
													<!-- <text :class="item.Status==1?'green':''">{{item.Status==1 ? '成功' : '待审核'}}</text> -->
												</view>
                        <view class="time">{{getTime2(item.CreateTime)}}</view>
                    </view>
                    <view class="rightbox">{{'+'+item.Commission}}</view>
                </view>
            </block>
            <block v-else>
                <view style="height:100vh;background-color:white;">
                    <u-empty mode="list" width="100" height="100" icon="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720073678914285.png"
				:show="true" iconSize="32" text="暂无明细"></u-empty>
                </view>
			    

			</block>
            
            </view>
        </block>
        <block v-if="navIndexValue == 1">
            <view class="listbox">
            <!-- <view class="titlebox">
                <view class="leftline"></view>
                <view class="title_2">提现记录</view>
            </view> -->
            <block v-if="list2.length > 0">
                <view class="content" v-for="(item,index) in list2" :key="index">
                    <view class="leftbox">
                        <view class="sill">
													{{item.CommissionType}}
													<text :class="item.Status==1?'green':''">{{item.Status==1 ? '成功' : '待审核'}}</text>
												</view>
                        <view class="time">{{getTime2(item.CreateTime)}}</view>
                    </view>
                    <view class="rightbox">{{'-'+item.Money}}</view>
                </view>
            </block>
            <block v-else>
                <view style="height:100vh;background-color:white;">
                    <EmptyBox text="暂无记录"></EmptyBox>
                </view>
			</block>
            
            </view>
        </block>
        

        <uni-popup type="center" ref="signbox" :animation="false">
            <view class="moneybox">
                <view class="moneytext">请输入提现的金额</view>
                <view class="moneycontent">
                     <input type="text" placeholder="请输入金额" v-model="Money" />
                </view>
               
                <view class="summoneybox">
                    <view class="summoney">{{'当前总收益为：'}}<text class="sumconmm">{{(userinfo.Commission?userinfo.Commission:'0')}}</text></view>
                    <view class="allbtn" @click="Money = userinfo.Commission">提现全部</view>
                </view>
                <view class="confimbtn" @click="Withdrawal">确认提现</view>
                <view class="Tiptext">注：提现金额不能小于10</view>
            </view>
		</uni-popup>
    </view>
</template>

<script>
export default {
components: {},
data() {
return {
    navIndexValue:0,
    PageIndex:1,
    PageSize:10,
    userinfo:{},
    list:[],
    Money:0,
    navMenu:['收益明细','提现记录'],
    list2:[],
};
},
onLoad(){
    this.SaleChannelDetail()
    this.UserCommissionV2()
},
onShow(){
    this.UserDepositLogs()
},
 // 触底事件
  onReachBottom() {
    if(this.isMore){
        this.PageIndex++
        this.UserCommissionV2()
      
    }
  },
methods: {
    async UserDepositLogs(){
        let res = await this.$api.post('SaleChannel/UserDepositLogs')
        if(res.code == 0){
            this.list2 = this.list2.concat(res.data)
						// this.list2 = [{CommissionType:'提现',Status:0,CreateTime:'2024-02-24 21:22:00',Money:'222'}]
        }
        
    },
    navIndex(index) {
      this.navIndexValue = index;
      this.PageIndex = 1
      if(index == 0){
            this.list = []
            this.UserCommissionV2()
      }else{
        this.list2 = []
        this.UserDepositLogs()
      }
    },
    tixbtn(){
        // this.Money = 0
        this.$refs.signbox.open()
    },
    async Withdrawal(){

        if(!Number(this.Money)){
            this.$pv.msg('请输入正确的数字');
            return;
        }
        if(Number(this.Money) < 10){
            this.$pv.msg('提现金额不能小于10');
            return;
        }
        if(Number(this.userinfo.Commission) < Number(this.Money)){
            this.$pv.msg('提现金额不能大于已拥有的收益');
            return;
        }
        let _this = this
        uni.showModal({
            title: "温馨提示",
            content: '您确定要提现'+_this.Money+'元吗？',
            confirmText: "确定",
            success: async function (res) {
                if (res.confirm) {
                    let res1 = await _this.$api.post('SaleChannel/Deposit',{
                        Money:_this.Money,
                    })
                    if(res1.code == 0){
                        _this.$pv.msg('提现成功,请耐心等待');
                        _this.Money = 0
                        _this.$refs.signbox.close()
                    }else{
                        this.$pv.msg(res1.message);
                        return;
                    }
                } else if (res.cancel) {
                }
            },
        });
    },
    async SaleChannelDetail(){
        let res =await this.$api.post('SaleChannel/Detail')
        if(res.code == 0){
            this.userinfo = res.data
            // this.Money = 
        }else{
					this.$u.toast(res.message)
				}
    },
    async UserCommissionV2(){
        let res =await this.$api.post('SaleChannel/UserCommissionV2',{
            PageIndex:this.PageIndex,
            PageSize:this.PageSize,
        })
        if(res.code == 0){
            this.list = this.list.concat(res.data)
        }
        this.isMore =
            Array.isArray(res.data) && res.data.length >= this.PageSize;
    },
    getTime2(l) {
            let d = new Date(l);
            let timestamp = d.getTime();
            return this.$util.unixDatetime(timestamp, 'yy-ss');
        },
},
created() {

},
}
</script>
<style lang='scss'>
page{
    background-color: #f6f6f6;
}
  .navList {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 16rpx;
    align-self: center;
    margin-top: 24rpx;
    width: 702rpx;
    display: flex;
    flex-direction: column;
    padding: 24rpx 62rpx 8rpx 54rpx;
    margin: 0 auto;
    margin-bottom: 20rpx;
    box-sizing: border-box;
    .navContent{
      flex-direction: row;
      display: flex;
      justify-content: space-between;
      .text_5 {
        overflow-wrap: break-word;
        color: rgba(51, 51, 51, 1);
        font-size: 32rpx;
        font-family: PingFang-SC-Bold;
        font-weight: normal;
        text-align: right;
        white-space: nowrap;
        line-height: 44rpx;
      }
      .navActive {
        font-weight: bold;
        ::after {
          content: "";
          display: block;
          width: 50rpx;
          height: 10rpx;
          background: #5d8bf8;
          margin: 0 auto;
          margin-top: 15rpx;
          border-radius: 25rpx;
        }
      }
    }
  }

.moneybox{
    width: 550rpx;
    height: fit-content;
    padding: 32rpx 0;
    background-color: #fff;
    border-radius: 32rpx;
    .summoneybox{
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin-top: 30rpx;

      .summoney{
            font-size: 24rpx;
            color: #999999;
            .sumconmm{
                font-size: 28rpx;
                font-weight: bold;
                color: #333333;
            }
        }
        .allbtn{
            width: 120rpx;
            height: 60rpx;
            text-align: center;
            line-height: 60rpx;
            border-radius: 30rpx;
            font-size: 20rpx;
            color: #fff;
            background-color: #5d8bf8;
        }  
    }
    
    .moneytext{ 
        font-size: 32rpx;
        font-weight: bold;
        color: #333333;
        text-align: center;
    }
    .moneycontent{
        border: 2rpx solid #E4E4E4;
        width: 70%;
        height: 80rpx;
        margin: 0 auto;
        margin-top: 20rpx;
        text-align: center;
        line-height: 80rpx;
        font-size: 28rpx;
        border-radius: 8rpx;
        padding: 20rpx 0;
        line-height: 1;
        >input{
            font: inherit;
            display: block;
            min-height: 0 !important;
            // height: 100%;
        }
    }
    .confimbtn{
            width: 182rpx;
            min-width: 182rpx;
            height: 64rpx;
            background: #5d8bf8;
            border-radius: 32rpx;
            text-align: center;
            line-height: 64rpx;
            color: #fff;
            font-size: 28rpx;
            margin: 40rpx auto;
    }
    .Tiptext{
        font-size: 24rpx;
        color: #FC4F45;
        text-align: center;
    }
}
.payHuiDouNav {
          background-color: #5d8bf8;
          border-radius: 36rpx;
        //   margin-top: 88rpx;
          display: flex;
          flex-direction: column;
          padding: 10rpx 40rpx;
         margin-left: auto;
          .text_4 {
            overflow-wrap: break-word;
            color: rgba(255, 255, 255, 1);
            font-size: 28rpx;
            font-family: PingFang-SC-Medium;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 40rpx;
          }
        }
.topbox{
    width: 702rpx;
    height: 224rpx;
    margin: 14rpx auto;
    // background-image: url('https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720406592968785.png');
    // background-size: cover;
    // background-repeat: no-repeat;
    background: #f78d4c4f;
    border-radius: 16rpx;
    overflow: hidden;
    .commis{
        margin: 32rpx 0 0 32rpx;
        font-size: 72rpx;
        font-weight: bold;
        color: #333333;
    }
    .titlebox{
        display: flex;
        align-items: center;
        margin-left: 32rpx;
        width: 85%;
        .coinimg{
            width: 40rpx;
            height: 40rpx;
            margin-right: 8rpx;
        }
        .title_1{
            font-size: 28rpx;
            color: #333333;
        }
    }
}
.listbox{
    background-color: #fff;
    width: 702rpx;
    margin: 0 auto;
    padding: 32rpx;
    box-sizing: border-box;
    .titlebox{
        display: flex;
        align-items: center;
        margin-bottom: 32rpx;
        .title_2{
            font-size: 32rpx;
            color: #333333;
            font-weight: bold;
        }
        .leftline{
            width: 6rpx;
            height: 36rpx;
            background: #5d8bf8;
            border-radius: 4rpx;
            margin-right: 8rpx;
        }
    }
    .content{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30rpx;
        padding-bottom: 30rpx;
        border-bottom: 1rpx solid #E4E4E4;
        .leftbox{

            .sill{
                font-size: 28rpx;
                font-weight: bold;
                color: #333333;
                margin-bottom: 8rpx;
								display: flex;
								align-items: center;
								text{
									font-size: 24rpx;
									color: #5d8bf8;
									margin-left: 8rpx;
								}
            }
						.green{
							color: #4ccc88 !important;
						}
            .time{
                font-size: 24rpx;
                color: #999999;
            }
        }
        .rightbox{
            font-size: 28rpx;
            color: #5d8bf8;
        }
    }
}
.listbox .content:last-child{
    border-bottom: 0rpx;
    padding-bottom: 0rpx;
}
</style>